<!DOCTYPE html>
<html lang="en">

<head>
    <#include file="/include.html" />
    <title>Document</title>
</head>

<body>
    <div id="app" v-cloak>


           <el-row style=" width: 100%; margin-top: -25px;">
            <el-col :sm="4" :md="4" :xs="4">

                <el-menu default-active="subaction" class="el-menu-vertical-demo" @open="handleOpen"
                    @close="handleClose" @select="handleSelect" :default-openeds=["1"] background-color="#545c64" text-color="#fff"
                    active-text-color="#ffd04b" style="margin-left: -6px;">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item :index="(item.url)" v-for="(item,index) in this.menus" :key="index">
                            <span >{{item.name}}</span>
                        </el-menu-item>

                    </el-submenu>
                    <el-menu-item index="21">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="31">
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="41">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :sm="20" :md="20" :xs="20">
                <div>
                    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
                        @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                        style="margin-right: -6px; ">
                        <el-menu-item index="21">处理中心</el-menu-item>
                        <el-submenu index="22">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                            <el-menu-item index="2-3">选项3</el-menu-item>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项1</el-menu-item>
                                <el-menu-item index="2-4-2">选项2</el-menu-item>
                                <el-menu-item index="2-4-3">选项3</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="23" disabled>消息中心</el-menu-item>
                        <el-menu-item index="24"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
                    </el-menu>
                </div>
                <div>
                    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
                        <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title"
                            :name="item.name">
                            <div v-html="item.content"></div>
                        </el-tab-pane>
                    </el-tabs>


                </div>
            </el-col>   
        </el-row>


    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                iframeHeight: window.innerHeight - 100,
                getPageUrl: '',
                subaction: "1",
                activeIndex2: '1',
                tabIndex: 1,
                editableTabsValue: '2',
                editableTabs: [],
                menus: [
                    { "id": 1, "url": "/user/", "name": "用户管理" },
                    { "id": 2, "url": "/user/1", "name": "用户管理1" },
                    { "id": 3, "url": "/user/2", "name": "用户管理2" },
                    { "id": 4, "url": "/user/3", "name": "用户管理3" },
                    { "id": 5, "url": "/user/4", "name": "用户管理4" }]
            };
        },
        created: function () {
            // `this` 指向 vm 实例
            console.log('a is: ' + this.a)
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);            
                this.menus.some((item1, key1) => {
                    if (item1.url == key) {
                        item=item1;
                        this.menuclick(item);
                        return;                        
                    }
                });
                

            },
            menuclick(item) {
                iframeHeight = window.innerHeight - 100; 
                let newTabName = '';
                let isok = 0;
                this.editableTabs.some((item1, key) => {
                    if (item1.name == item.id) {
                        isok = 1;
                        newTabName = item.id+'';
                        return;
                    }
                });
                if (isok == 0) {
                                  
                    html = '<iframe src="' + item.url + '" width="100%"' +
                            'height="' + iframeHeight + '" frameborder="0" scrolling="no"></iframe>';
                    newTabName = item.id + '';
                    this.editableTabs.push({
                        title: item.name,
                        name: newTabName,
                        content: html
                    });
                    
                }
                this.editableTabsValue = newTabName;

            },
            handleTabsEdit(targetName, action) {
                if (action === 'remove') {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }

                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }
            }
        }

    })
</script>

</html>